<template>
  <el-form v-bind="$attrs" :model="porps.model" ref="formRef">
    <el-row>
      <el-col
        :span="porps.span"
        v-for="item in porps.options"
        :key="item.username"
      >
        <el-form-item
          :label="item.label"
          v-if="item.component === 'input'"
          :prop="item.model"
        >
          <el-input v-bind="item.props" v-model="model[item.model]"></el-input>
          <!-- <el-input type="password"></el-input> -->
        </el-form-item>
        <el-form-item
          :label="item.label"
          v-if="item.component === 'select'"
          :prop="item.model"
        >
          <el-select placeholder="请选择城市" v-model="model[item.model]">
            <el-option
              v-for="city in item.options"
              :label="city.label"
              :value="city.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.component === 'button'">
          <el-button @click="clickHandler(item.submitHandler)">{{
            item.btnText
          }}</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const porps = defineProps<{
  options: any;
  span: number;
  model: any;
}>();
const formRef = ref();
const clickHandler = async (cb: () => void) => {
  await formRef.value.validate();
  cb();
};
</script>

<style lang="less" scoped></style>
